image-promise

image-promise

Load one or more images, return a promise. Only 0.4KB, for the browser, no dependencies.

It can be used in two ways:

• given a URL, generate an <img> and wait for it to load:

  loadImage('img.jpg').then(/*it's loaded!*/)
  

• given an <img>, wait for it to load:

  const img = document.querySelector('img.my-image');
  loadImage(img).then(/*it's loaded!*/)
  

Install

Pick your favorite:

<script src="dist/image-promise.min.js"></script>

npm install --save image-promise

var loadImage = require('image-promise');

import loadImage from 'image-promise';

Usage

One image

loadImage(image) will return a Promise that resolves when the image load, or fails when the image

var image = 'cat.jpg';
// var image = $('img')[0]; // it can also be an <img> element

loadImage(image)
.then(function (img) {
	ctx.drawImage(img, 0, 0, 10, 10);
})
.catch(function () {
	console.error('Image failed to load :(');
});

Multiple images

image-promise can load multiple images at a time

var images = ['cat.jpg', 'dog.jpg'];
// var images = $('img'); // it can also be a jQuery object
// var images = document.querySelectorAll('img'); // or a NodeList

loadImage(images)
.then(function (allImgs) {
	console.log(allImgs.length, 'images loaded!', allImgs);
})
.catch(function (err) {
	console.error('One or more images have failed to load :(');
	console.error(err.errored);
	console.info('But these loaded fine:');
	console.info(err.loaded);
});

Dependencies

None! But you need to polyfill window.Promise in IE11 and lower.

License

MIT © Federico Brigante